import React, { useState } from "react";
import styles from "./index.module.css";
import { Steps, Popup } from "antd-mobile";
function Index(props) {
  const { state } = props;
  const { Step } = Steps;
  const [visible1, setVisible1] = useState(false);
  return (
    <div className={styles.zhuye}>
      <div className={styles.listItem_left}>
        <span>{state.start}</span>
        <span>{state.end}</span>
        <span>{state.startTime}</span>
        <span>
          商务座 <b>有票</b>
        </span>
        <span>
          二等座 <b>有票</b>
        </span>
        <span>
          三等座 <b>有票</b>
        </span>
      </div>
      <span className={styles.stopTick} onClick={() => setVisible1(true)}>
        经停站
      </span>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <Steps direction="vertical">
          <Step title="北京" status="process" />
          <Step title="天津" status="wait" />
          <Step title="河北" status="wait" />
          <Step title="山东" status="wait" />
          <Step title="江苏" status="wait" />
          <Step title="武汉" status="wait" />
          <Step title="广州" status="wait" />
        </Steps>
      </Popup>
    </div>
  );
}

export default Index;
